<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head"></el-row>
    <el-row>
        <subject-info @change="changeCourseSubject"></subject-info>
        <div class="demoList">
          <ul style="margin-top: 50px" class="clearfix">
            <li v-for="(course, index) in courseList" :key="index" class="typeitem">
              <img
                @click="studyCourse(course)"
                :src="fileHost + course.headImg"
                class="image">
              <p class="title">{{course.name}}</p>
              <p class="course_detail">测试课程</p>
              <div style="margin-top: 5px;line-height:35px;">
                <i class="el-icon-user-solid">25人学习</i>
                <el-button
                  style="float: right"
                  @click="collectCourse(index)" icon="el-icon-star-off" type="text">收藏</el-button>
              </div>
            </li>
          </ul>
        </div>
    </el-row>

    <div class="block">
      <el-pagination
        background
        v-if="totalCount > pageSize"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import subjectInfo from "../../components/subject-info";
  export default {
    name: 'courseVideo',
    components: {subjectInfo},
    data () {
      return {
        fileHost: this.$store.state.common.fileHost,
        courseList: [],
        currentPage: 1,
        pageSize: 9,
        totalCount: 0
      }
    },

    mounted () {
      this.getCourseList()
    },

    destroyed () {

    },

    methods: {

      changeCourseSubject (val) {
        this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            status: 1,
            subjectId: val
          }
        }).then(response => {
          this.courseList = response.data.data.dataList
          this.totalCount = response.data.data.total
        })
      },

      getCourseList () {
        this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            status: 1
          }
        }).then(response => {
          this.courseList = response.data.data.dataList
          this.totalCount = response.data.data.total
        })
      },

      studyCourse (course) {
        this.$store.commit('course/updateCourseInfo', course)
        this.$router.push({
          name: 'courseDetail',
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .demoList ul {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 100px;
  }
  .demoList{
    padding-top: 30px;
  }

  .course_detail {
    padding-top: 6px;
    max-height: 48px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    color: #93999f
  }

  .demoList li {
    box-sizing: border-box;
    width: 192px;
    min-height: 160px;
    float: left;
    margin-right: 40px;
    margin-bottom: 30px;
    text-align: left;
    img{
      cursor: pointer;
      width: 100%;
      height:108px;
      display: block;
      border-radius: 8px;
      &:hover{
        opacity: 0.7;
      }
    }
  }

  .typeitem{
    cursor: pointer;
    width: 300px;
    .title {
      padding-top: 8px;
      font-weight: bold;
      &:hover {
        cursor: pointer;
        color: red;
      }
    }
  }

  .demoList li{
    width: 30%;
  }

  .demoList  .page {
    position: relative;
    left: 0;
    bottom: 50px;
    width: 100%;
    text-align: center;
  }

  .demoList li .image {
    height: 199px;
    width: 100%;
    display: block;
  }

  .top .item {
    margin-left: 20px;
  }

  .grid-head{margin-bottom: 30px;}

</style>
